<template>
    <view class="components-quote-info-item">
        <text class="create-time">{{data.createdTime}}</text>
        <view-price-info :categoryClass="categoryClass" :data="quoteInfo" :params="params" :option="optionParam" :contentClass="contentClass" >

        </view-price-info>
    </view>
</template>
<script type="text/ecmascript-6">
    import  ViewPriceInfo from '@/components/ibs/viewPriceInfo.vue'
    export default {
        components: {
            ViewPriceInfo
        },
        props: {
            data: Object
        },
        data() {
            return {
                params: [
                    {
                        label: '报　价',
                        key: 'priceString',
                        tipPoint: true, // 是否显示未读报价的提示
                        baseClass: ['base-single-class'],
                        labelClass: ['label-class'],
                        valueClass: ['value-class']
                    },
                    {
                        label: '备　注',
                        key: 'remark',
                        baseClass: ['base-single-class'],
                        labelClass: ['label-class-4c4c4c'],
                        valueClass: ['value-class-4c4c4c']
                    },
                    {
                        label: '联系人',
                        key: 'contact',
                        baseClass: ['base-single-class'],
                        labelClass: ['label-class-4c4c4c'],
                        valueClass: ['value-class-4c4c4c']
                    }
                ],
                optionParam: {
                    optionClass: ['option-contact'],
                    label: '拨号',
                    labelClass: ['info-button'],
                    optionClick: this.optionClick
                },
                categoryClass: ['quote-info'],
                contentClass: ['content-class']
            };
        },
        computed: {
            quoteInfo() {
                let quoteInfo = this.data;
                quoteInfo.contact = quoteInfo.contactName + '  ' + quoteInfo.contactMobileNo;
                return quoteInfo;
            }
        },
        methods: {
            optionClick(data) {
                uni.makePhoneCall({
                    phoneNumber: data.contactMobileNo //调用电话号码
                });
            }
        }
    };
</script>

<style>
    .components-quote-info-item {
        position: relative;
        background-color:#ffffff;
        border-top: 1upx #e5e5e5 solid;
    }
    .components-quote-info-item .quote-info {
        padding: 10upx 24upx;
        background-color: #ffffff;
        position: relative;
    }
    .components-quote-info-item .create-time {
        position:absolute;
        right: 0;
        height: 24upx;
        line-height: 24upx;
        font-size: 24upx;
        margin-top: 30upx;
        margin-right: 24upx;
        color: #737880;
        background-color: #ffffff;
        z-index:10;
    }
    .components-quote-info-item .content-class {
        width:100%;
        flex-shrink: 0;
        padding-bottom: 20upx;
    }

    .components-quote-info-item .base-single-class {
        padding-top: 20upx;
        width: 100%;
        vertical-align: middle;
        display: flex;
        flex-shrink: 0;
        background-color: white;
        justify-content: space-between;
    }
    .components-quote-info-item .label-class {
        width: auto;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 30upx !important;
        color: #1a1a1a;
        vertical-align: middle;
        text-align: left;
        display:flex;
    }
    .components-quote-info-item .value-class {
        width: 100%;
        color: #1a1a1a;
        font-size: 30upx !important;
        vertical-align: middle;
        text-align: left;
        display: flex;
        justify-content: space-between;
        flex-shrink: 0;
    }
    .components-quote-info-item .label-class-4c4c4c {
        width: auto;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 30upx !important;
        color: #4c4c4c;
        vertical-align: middle;
        text-align: left;
        display:flex;
    }
    .components-quote-info-item .value-class-4c4c4c {
        width: 100%;
        color: #4c4c4c;
        font-size: 30upx !important;
        text-align: left;
    }
    .components-quote-info-item .option-contact {
        width: 104upx;
        margin-bottom: 9upx;
        position:absolute;
        bottom: 10upx;
        right: 20upx;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
    .components-quote-info-item .info-button {
        width: 100upx;
        height: 48upx;
        line-height: 48upx;
        text-align: center;
        border-radius: 24upx;
        border: 2upx #077131 solid;
        color: #077131;
        font-weight: bold;
        font-size: 20upx;
    }
</style>